<template>
  <span class="comment-item">
    <div
      v-html="getUserPhoto"
      class="headerImg"
    />
    <span class="comment-content">
      <p class="comment-name">
        {{ commentItem.plr }}
        <span>{{ commentItem.updateTime }}</span>
      </p>
      <div class="comment-theme">
        <h4 class="comment-theme-cnt">
          <span
            v-if="commentItem.hfrId && commentItem.hfr"
            style="color:#536DFE"
          >@{{ commentItem.hfr }} </span>
          <span v-html="commentItem.zw" />
        </h4>
      </div>
      <div class="comment-file">
        <div
          v-for="(item, index) in getFiles"
          :key="index"
          class="file-item"
        >
          <span style="float: left">
            <i
              v-if="item.fileType == 'excel'"
              class="slImg jeicon jeicon-excel"
              style="color: rgb(0, 132, 62);"
            />
            <i
              v-else-if="item.fileType && item.fileType.includes('图片')"
              class="slImg jeicon jeicon-image"
              style="color: rgb(255, 119, 68);"
            />
            <i
              v-else-if="item.fileType == 'word'"
              class="slImg jeicon jeicon-word"
              style="color: rgb(0, 87, 170);"
            />
            <i
              v-else-if="item.fileType == '文本'"
              class="slImg jeicon jeicon-txt"
              style="color: rgb(43, 162, 68);"
            />
            <i
              v-else-if="item.fileType == 'pdf'"
              class="slImg jeicon jeicon-pdf"
              style="color: rgb(229, 44, 14);"
            />
            <i
              v-else-if="item.fileType == 'ppt'"
              class="slImg jeicon jeicon-ppt"
              style="color: rgb(243, 78, 25);"
            />
            <i
              v-else-if="item.fileType == '压缩包'"
              class="slImg jeicon jeicon-zip"
              style="color: rgb(251, 175, 50);"
            />
            <i
              v-else
              class="slImg jeicon jeicon-unknownfile"
            />
          </span>

          <div
            :title="item.name"
            class="fileName"
          >
            {{ item.name }}
          </div>
          <div class="handleIcon">
            <el-button
              @click="downloadFile(item)"
              type="text"
            >
              {{ $t('m.weiyou_download') }}
            </el-button>
            <el-button
              @click="previewFile(item)"
              type="text"
              style="margin-left:30px"
            >
              {{ $t('m.weiyou_preview') }}
            </el-button>
          </div>
        </div>
      </div>
      <p class="comment-tools">
        <span class="comment-bottom">
          <slot name="replayBtn" />
        </span>
      </p>
    </span>
  </span>
</template>
<script>

export default {
  name: 'CommentItem',
  components: {},
  props: {
    commentItem: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {

    };
  },
  computed: {
    getUserPhoto() {
      return JE.getUserPhoto(this.commentItem.plrId, true);
    },
    getFiles() {
      return this.commentItem.file;
    },
  },
  mounted() {
    // 人员头像处理
    const me = this;
    if (!JE.isNotEmpty(JE.__USERS__)) {
      $(document).on('mysubscrible', () => {
        me.$emit('updatePhoto');
      });
    }
  },
  methods: {
    downloadFile(item) {
      JE.File.doAct('download', '', '', item.pathKey, item.name);
    },
    previewFile(item) {
      JE.File.doAct('preview', '', '', item.pathKey, item.name);
    },
  },
};
</script>
<style lang="scss">
.comment-item {
  overflow: hidden;
  padding-bottom: 0;
  display: flex;
  .headerImg {
    float: left;
  }
  .comment-content {
    padding-left: 10px;
    .comment-name {
      font-size: 12px;
      font-weight: 400;
      color: #3f3f3f;
      margin-bottom: 12px;
    }
    .comment-theme {
      margin-bottom: 7px;
      .comment-theme-cnt {
        font-size: 14px;
        font-weight: 500;
        color: rgb(5, 2, 2);
      }
    }
    .comment-file {
      .file-item {
        padding: 0;
        border: 0;
        overflow: hidden;
        font-size: 14px;
        display: flex;
        align-items: center;
        .slImg {
          font-size: 16px;
        }
        .fileName {
          float: left;
          padding-left: 10px;
        }
        .handleIcon {
          flex: 1;
          float: left;
          padding-left: 30px;
          .el-button--text {
            padding: 4px 20px;
          }
        }
      }
      .file-item:last-child {
        padding-bottom: 0;
      }
    }
    .comment-tools {
      margin-bottom: 13px;
      overflow: hidden;
      display: flex;
      align-items: center;
      .comment-bottom {
        overflow: hidden;
        align-items: center;
        .el-button--text {
          font-size: 14px;
          font-weight: 400;
          color: rgba(169, 171, 169, 1);
          margin-right: 10px;
          &:hover{
            color: #409EFF;
          }
        }
      }
    }
  }
}
</style>>
